import React,{PureComponent} from 'react'
import {View,Button,SafeAreaView,Text,StyleSheet,TextInput,ScrollView,Dimensions,TouchableOpacity,Image,FlatList} from 'react-native'
import color from "../../../widget/color";
import {fetchGetRequest, fetchPostRequest} from "../../../api/NetworkTool";
import method from "../../../api/method";
import api from "../../../api/api";
import MineRefuedDetailCourseCell from '../../../widget/mine/MineRefuedDetailCourseCell'
import {NavigationActions} from "react-navigation";
import Tips from "react-native-root-tips";
import PayAlertDialog from '../../../widget/dialog/PayAlertDialog'
import XPay from "react-native-puti-pay";
import NetTool from "../../../api/NetTool";
import CommonAlertDialog from '../../../widget/dialog/CommonAlertDialog'


const {width, height} = Dimensions.get('window')


export default class MineRefuesDetailScene extends PureComponent{
    static navigationOptions = ({navigation}: any) => ({
        headerTintColor:'rgba(0,0,0,0.8)',
        title:'退款单',
        headerRight:<Text/>,
        headerLeft:<TouchableOpacity onPress={()=>{
            navigation.goBack()
        }}>
            <Image style={{marginLeft:12}} source={require('../../../../res/img/gobal_back.png')}/>
        </TouchableOpacity>
    });
    constructor(props){
        super(props)
        this.state = {
            info:{
                order:{},
                course:[{
                    id:45,
                    title:"数学课一",
                    start_date:"2018-05-21",
                    end_date:"2018-06-30",
                    price:1,
                    frequency:"每天",
                    start_time:"11:58",
                    end_time:"11:58",
                    teacher:[
                        {
                            "id":4,
                            "image":"https://t.static.jkzaixian.com/test/image/201806/02/1527937409KHdcTSc3rS84.jpg",
                            "realname":"江老师"
                        },
                        {
                            "id":4,
                            "image":"https://t.static.jkzaixian.com/test/image/201806/02/1527937409KHdcTSc3rS84.jpg",
                            "realname":"江老师"
                        }
                    ],
                    coupon:{

                    }
                }],
                address:{},
            },
            courses:[],
            address:{},
            showShop:false,
        }
    }
    componentDidMount() {
        const {orderId} = this.props.navigation.state.params

        let params = {
            orderId:orderId,
        }
        fetchGetRequest(api.getOrderDetail,method.get,params)
            .then(res=>{

                this.setState({info:res,courses:res.course,address:res.address})
            })
            .catch(err=>{})
    }

    render(){
        let address = this.state.address

        let disprice = this.state.info.order.discount
        let yingPrice = (this.state.info.order.amount - this.state.info.order.discount) > 0?(this.state.info.order.amount - this.state.info.order.discount):0

        let dis = (disprice) > 0?-disprice:0
        var staust =''

        let order = this.state.info.order
        if (order.refundStatus == 'unrefund'){
            staust = '未退款'
        } else if (order.refundStatus == 'refunding'){
            staust = '退款中'

        } else if (order.refundStatus == 'refund_success'){
            staust = '退款成功'

        }else if (order.refundStatus == 'refund_fail'){
            staust = '退款失败'

        }
        var type = '微信支付'
        if (this.state.info.order.clientType == 'wxpay'){
            type = '微信支付'
        } else {
            type = '支付宝支付'
        }
        return (
           <SafeAreaView style={{flex:1}}>
               <ScrollView>
                   <View style={{paddingLeft:12,paddingRight:12,paddingBottom:15,paddingTop:15,backgroundColor:'white'}}>
                       <Text style={{color:'#111111', fontSize:13, fontWeight:'bold',marginBottom:10}}>订单信息</Text>
                       <View style={{flexDirection:'row',alignItems:'center'}}>
                           <Text style={styles.text_show}>订单号:</Text>
                           <Text style={styles.text_data}>{this.state.info.order.order_sn}</Text>
                       </View>
                       <View style={{flexDirection:'row',alignItems:'center',marginTop:10}}>
                           <Text style={styles.text_show}>下单时间：</Text>
                           <Text style={styles.text_data}>{this.state.info.order.pay_time}</Text>
                       </View>
                       <View style={{flexDirection:'row',alignItems:'center',marginTop:10}}>
                           <Text style={styles.text_show}>订单状态：</Text>
                           <Text style={styles.text_data}>{staust}</Text>
                       </View>
                       <View style={{flexDirection:'row',alignItems:'center',marginTop:10}}>
                           <Text style={styles.text_show}>支付方式：</Text>
                           <Text style={styles.text_data}>{type}</Text>
                       </View>
                   </View>
                   <View style={{width:width,height:2,backgroundColor:'#F9F9F9'}}/>

                   <View style={{paddingLeft:12,paddingRight:12,paddingBottom:15,backgroundColor:'white'}}>
                       <View style={{flexDirection:'row',alignItems:'center',marginTop:15}}>
                           <Text style={{color:'#111111', fontSize:13, fontWeight:'bold'}}>收货人信息</Text>
                       </View>
                       <View style={{flexDirection:'row',alignItems:'center',marginTop:10}}>
                           <Text style={styles.text_show}>收货人：</Text>
                           <Text style={styles.text_data}>{address.receiver}</Text>
                       </View>
                       <View style={{flexDirection:'row',alignItems:'center',marginTop:10}}>
                           <Text style={styles.text_show}>联系电话：</Text>
                           <Text style={styles.text_data}>{address.mobile}</Text>
                       </View>
                       <View style={{flexDirection:'row',alignItems:'flex-start',marginTop:10}}>
                           <Text style={[styles.text_show,{marginTop:2}]}>具体地址：</Text>
                           <Text style={[styles.text_data,{width:(width - 100)}]}>{address.city_name + address.address}</Text>
                       </View>
                   </View>
                   <View style={{width:width,height:2,backgroundColor:'#F9F9F9'}}/>
                   <View style={{paddingLeft:12,paddingRight:12,paddingBottom:5,backgroundColor:'white'}}>
                       <Text style={{color:'#111111', fontSize:13, fontWeight:'bold',marginTop:15}}>课程详情</Text>
                       <FlatList
                           style={{marginTop:5}}
                           data={this.state.courses}
                           renderItem={this.renderCell}
                           keyExtractor={this.keyExtractor}
                           ItemSeparatorComponent={()=><View style={{marginLeft:8,width:width-40,height:1,backgroundColor:'rgba(0,0,0,0.25)'}}/>}
                       />
                   </View>
                   <View style={{width:width,height:2,backgroundColor:'#F9F9F9'}}/>
                   <View style={{paddingLeft:12,paddingRight:12,paddingBottom:15,backgroundColor:'white'}}>
                       <Text style={{color:'#111111', fontSize:13, fontWeight:'bold',marginTop:15}}>结算信息</Text>
                       <View style={{flexDirection:'row',alignItems:'center',marginTop:10}}>
                           <Text style={{color:'rgba(0,0,0,0.7)',fontSize:12}}>订单金额</Text>
                           <View style={{flex:1}}/>
                           <Text style={{color:'rgba(0,0,0,0.8)',fontSize:12,fontWeight:'700',marginRight:8}}>{this.state.info.order.amount}</Text>
                       </View>
                       <View style={{flexDirection:'row',alignItems:'center',marginTop:10}}>
                           <Text style={{color:'rgba(0,0,0,0.7)',fontSize:12}}>优惠金额</Text>
                           <View style={{flex:1}}/>
                           <Text style={{color:'rgba(0,0,0,0.8)',fontSize:12,fontWeight:'700',marginRight:8}}>{dis}</Text>
                       </View>
                       <View style={{flexDirection:'row',alignItems:'center',marginTop:10}}>
                           <Text style={{color:'rgba(0,0,0,0.7)',fontSize:12}}>实付金额</Text>
                           <View style={{flex:1}}/>
                           <Text style={{color:'rgba(0,0,0,0.8)',fontSize:12,fontWeight:'700',marginRight:8}}>{this.state.info.order.price}</Text>
                       </View>
                   </View>
                   <View style={{width:width,height:2,backgroundColor:'#F9F9F9'}}/>
                   <View style={{paddingLeft:12,paddingRight:12,paddingBottom:15,backgroundColor:'white'}}>
                       <Text style={{color:'#111111', fontSize:13, fontWeight:'bold',marginTop:15}}>退款进度</Text>
                       <View style={{flexDirection:'row',alignItems:'center',marginTop:10}}>
                           <Text style={{color:'rgba(0,0,0,0.7)',fontSize:12}}>{staust}</Text>
                       </View>

                   </View>
               </ScrollView>
               <CommonAlertDialog title={'订单已加入购物车'} onPress={()=>{
                   for (let i = 0; i < this.state.courses.length; i+=2) {
                       let course1 = this.state.courses[i]
                       if ((i+1) >= this.state.courses.length){
                           this.join_shop(course1.id,null)
                       }else {
                           let course2 = this.state.courses[i+1]
                           this.join_shop(course1.id,course2.id)
                       }

                   }
               }} closeModal={
                   (statu)=>{this.setState({showShop:statu})}
               } confirmTitle={'去订单支付'} show={this.state.showShop}/>
               {this.renderTui()}
           </SafeAreaView>
        )
    }
    renderTui(){
        const {refundStatus} = this.state.info.order

        if (refundStatus == 'refund_success'){
            return <TouchableOpacity onPress={()=>{
                this.setState({showShop:true})
            }} style={{backgroundColor:'#DB3853',width:width,height:50,alignItems:'center',justifyContent:"center"}}>
                <Text style={{color:'white',fontSize:16,fontWeight:'bold'}}>再次购买</Text>
            </TouchableOpacity>
        } else {
            return <View/>
        }
    }
    join_shop(courseId1,courseId2){

        let params = {
            course:courseId1,
        }
        fetchGetRequest(api.join_shop,method.get,params)
            .then(res=>{
                if (courseId2){
                    this.join_shop1(courseId2)
                }else {
                    this.props.navigation.navigate('ShoppingCart')
                }
            })
            .catch(err=>{
                Tips.showFail(err,{mask:true})
            })
    }
    join_shop1(courseId){

        let params = {
            course:courseId,
        }
        fetchGetRequest(api.join_shop,method.get,params)
            .then(res=>{
            })
            .catch(err=>{
                Tips.showFail(err,{mask:true})
            })
    }
    deleteOrder(){
        this.setState({show_alert:true})

    }
    renderCell = (item: any) => {
        return (
            <MineRefuedDetailCourseCell course={item.item}/>
        )
    }
    keyExtractor = (item: Object, index: number) => {
        return index + ''
    }
}
const styles = StyleSheet.create({

    text_show:{
        color:'rgba(0,0,0,0.5)',
        fontSize:12,
        fontWeight:'200',
        width:64,
    },
    text_data:{
        fontSize:13,
        color:'black',
        marginLeft:15,
        marginRight:12,
    },
    title_show_jie_e:{
        color:'rgba(0,0,0,0.7)',
        fontWeight:'bold',
        fontSize:12,
    },
    title_data_jie_e:{
        color:'rgba(0,0,0,0.8)',
        fontSize:18,
        fontWeight:'700',
    },
    title_view:{
        flexDirection:'row',
        backgroundColor:'white',
        alignItems:'center',
    },
})